<template>
  <div class="Main">
    <app-header></app-header>
   <div class="page_content">
            <x-card class="card">
                <div class="search_operate">
                    <base-select class="select_field" v-model="searchParam.streage" :show-label="false">
                        <base-option value="all" label="全部"></base-option>
                        <base-option value="title" label="标题"></base-option>
                        <base-option value="authors" label="作者"></base-option>
                        <base-option value="journalRef" label="期刊"></base-option>
                    </base-select>

                    <base-input class="select_value" v-model="searchParam.search" placeholder="输入检索词" :show-label="false" clearable @clear="getArticle"> </base-input>

                    <base-button type="primary" @click="getArticle"> 检索 </base-button>
                </div>
            </x-card>
            <x-card v-if="loading" class="bounce-loading">
                <bounce-loading></bounce-loading>
            </x-card>
            <x-card v-else  class="card">
                <div class="search_result">
                    <div class="search_result_operate">
                        <div>
                            <span class="result_total_text">共找到 </span>
                            <span class="result_num">{{total}} 篇论文</span>
                        </div>
                    </div>
                    <base-divider></base-divider>
                    <div class="search_result_list">
                        <base-table
                            :data="articleList"
                            stripe
                            style="width: 100%"
                            :cell-style="{ height: '50px' }">
                            <base-table-column
                                prop="title"
                                label="标题"
                                width="300">
                                <template slot-scope="scope">
                                      <router-link
                                        :to="`/microapp/eprint/absDetail/${scope.row.csoaid}`"
                                        class="NewYYB__link"
                                    >
                                    {{ scope.row.title }}
                                    </router-link>
                                </template>
                            </base-table-column>
                            <base-table-column
                                prop="authors"
                                label="作者">
                            </base-table-column>
                            <base-table-column
                                prop="abstracts"
                                label="全文">
                                <template slot-scope="scope">
                                    <img src="../assets/images/page/PDF.png" style="width:  30px;cursor: pointer;" @click="jumpPDF(scope.row.fulltext)"/>
                                </template>
                            </base-table-column>
                            <base-table-column
                                prop="opensubject"
                                label="学科">
                            </base-table-column>
                            <base-table-column
                                prop="sysJournal.journalTitle"
                                label="期刊">
                            </base-table-column>
                            <base-table-column
                                prop="reserveTime"
                                label="提交时间">
                            </base-table-column>
                            <base-table-column
                                prop="statusName"
                                label="约稿状态">
                                <template slot-scope="scope">
                                    <base-button
                                        :type="codeMap[scope.row.journalSelectStatus].split('-')[1]"
                                        size="mini"
                                        disabled>
                                        {{ codeMap[scope.row.journalSelectStatus].split('-')[0]}}
                                    </base-button>
                                </template>
                            </base-table-column>
                            <base-table-column
                                prop="statusName"
                                label="投稿状态">
                                <template slot-scope="scope">
                                    <base-button
                                        :type="codeMapSubmit[scope.row.journalSubmitStatus].split('-')[1]"
                                        size="mini"
                                        disabled>
                                        {{ codeMapSubmit[scope.row.journalSubmitStatus].split('-')[0]}}
                                    </base-button>
                                </template>
                            </base-table-column>
                            <base-table-column
                                prop="statusName"
                                label="审核意见">
                                <template slot-scope="scope">
                                    <base-button
                                        type="primary"
                                        size="mini" :loading="scope.row.commentLoading" @click="getCheckComments(scope.row);">
                                        查看
                                    </base-button>
                                </template>
                            </base-table-column>
                        </base-table>
                    </div>

                    <div class="page-warp">
                        <base-pagination
                            @current-change="getArticle"
                            background
                            layout="prev, pager, next"
                            :total="total"
                            :page-size="searchParam.size"
                            :current-page.sync="searchParam.page"
                        ></base-pagination>
                    </div>
                </div>
            </x-card>
    </div>
    <app-dialog  ref="commentCheckDialog" dialogTitle="审核意见" originTitle staticDialog width="50%">
        <div style="text-align: center;">
                <base-table 
                    :data="commentsList"
                    style="width: 100%">
                    <base-table-column
                        width="100"
                        prop="statsu"
                        label="审核状态">
                        <template slot-scope="scope">
                            <base-button :type="scope.row.status ? codeMap[scope.row.status].split('-')[1] : 'primary'" size="mini" disabled>
                                <span v-if="!scope.row.status">已回复</span>
                                <span v-if="scope.row.status != '' && scope.row.status == 0">接收</span>
                                <span v-if="scope.row.status != '' && scope.row.status == 1">初审</span>
                                <span v-if="scope.row.status != '' && scope.row.status == 2">复审</span>
                                <span v-if="scope.row.status != '' && scope.row.status == 3">终审</span>
                                <span v-if="scope.row.status != '' && scope.row.status == 4">录用</span>
                                <span v-if="scope.row.status != '' && scope.row.status == 5">已排版</span>
                        </base-button>
                        </template>
                    </base-table-column>
                    <base-table-column
                        width="100"
                        prop="operation"
                        label="操作">
                    </base-table-column>
                    <base-table-column
                        width="380"
                        prop="comment"
                        label="审核/回复意见">
                    </base-table-column>
                    <base-table-column
                        width="180"
                        prop="commentFileUrl"
                        label="附件">
                        <template slot-scope="scope">
                            <a :href="scope.row.commentFileUrl.replace('http://124.16.154.205:9000/','/minioUrl/')">{{ scope.row.commentFileName }}</a>
                        </template>
                    </base-table-column>
                    <base-table-column
                        width="100"
                        prop="user.name"
                        label="审核/回复人">
                    </base-table-column>
                    <base-table-column
                        width="120"
                        prop="createTime"
                        label="审核/回复时间">
                    </base-table-column>
                    
                </base-table>
                <div class="page-warp" style="margin: 20px 0px;">
                    <base-pagination
                        @current-change="getCheckComments"
                        background
                        layout="total,prev, pager, next"
                        unitText="条资源"
                        :total="commentsTotal"
                        :page-size="commentslSize"
                        :current-page.sync="commentsPage"
                    ></base-pagination>
                </div>

                <base-button type="primary" style="width:10%;" size="medium" @click="$refs['commentAnswer'].show()">回复</base-button>
                <base-button type="primary" style="width:10%;" size="medium" @click="$refs['commentCheckDialog'].hide()">取消</base-button>
        </div>
    </app-dialog>
   <app-dialog  ref="commentAnswer" dialogTitle="回复意见" originTitle staticDialog width="30%">
        <base-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入回复意见" v-model="submitParam.comment"></base-input>
        <div class="check-div" style="margin: 20px 0px;">
            <base-upload
                class="upload-demo"
                drag
                action="/yundianApi/videoAudio/v1/uploadMinio"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :file-list="fileList">
                <i class="base-icon-upload"></i>
                <div class="base-upload__text">
                    将文件拖到此处，或<em>点击上传附件</em>
                    <div class="base-upload__tip" slot="tip">大小不超过20MB</div>
                </div>
            </base-upload>
        </div>
        <div style="text-align: center;">
            <base-button type="primary" size="medium" @click="operation()" :loading="saveCommentLoading">回复</base-button>
            <base-button type="primary" size="medium" @click="$refs['commentAnswer'].hide()">取消</base-button>
        </div>
   </app-dialog>
    <app-footer></app-footer>
  </div>
</template>

<script>
import {XCard,AppDialog} from "@zkwq/business";
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
import {GetAllJournal,CheckArticleStatus,GetAllArticle,GetCheckComments} from "@/service/journal";
import {EditCart,BatchCarts} from '../service/cart'
import {EditOrder} from '../service/order'
export default {
  name: 'JournalArticle',
  components: {
    AppHeader,
    AppFooter,
    AppDialog,
    XCard
  },
  data() {
    return {
      searchParam:{
        page:1,
        size:10,
        streage:"all",
        title:'',
        authors:'',
        journalRef:'',
      },
      value:false,
      dateRange:[],
      loading:false,
      saveCommentLoading:false,
      total:0,
      articleList:[],
      subjectAgg:[],
      organizerInsAgg:[],
      themeAgg:[],
      checkedList: [],
      codeMap: { 0: '待确认-info', 1: '约稿成功-success', 2: '约稿失败-danger',3: '取消约稿-warning',4:'可预约-primary'},
      codeMapSubmit: { 0: '已接收-info', 1: '初审中-primary', 2: '复审中-warning',3: '终审中-warning',4:'已录用-success',5:'已排版-success'},
      commentsList:[],
      commentsPage:0,
      commentslSize:10,
      commentsTotal:0,
      submitParam:{
          articleId:'',
          userId:'',
          userRole:'',
          operation:'',
          comment:'',
          commentFileUrl:'',
          commentFileName:'',
          status:'',
          op:'',
      },
      fileList:[],
      articleId:'',
    }
  },
  mounted() {
    this.getArticle();
    console.log(this.$store.state.user)
  },
  methods: {
    handleAvatarSuccess(res, file) {
        this.fileList = [];
        this.submitParam.commentFileUrl = res.msg;
        this.submitParam.commentFileName = file.name;
        this.fileList.push(file.raw)
    },
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 20;
        if (!isLt2M) {
            this.$message.error('上传附件大小不能超过 20MB!');
            return false;
        }

    },
    getArticle(){
        this.loading = true;
        this.searchParam.isHome = 4,
        this.searchParam.userId = this.$store.state.user.id ? this.$store.state.user.id:null
        GetAllArticle(this.searchParam).then(e => {
            if (e && e.data && e.data.records){
                this.articleList = e.data.records;
                this.total = e.data.total;
                this.loading = false;
                this.articleList.forEach(item =>{
                    if (null == item.journalSelectStatus){
                        item.journalSelectStatus = 4;
                    }
                    if (null == item.journalSubmitStatus){
                        item.journalSubmitStatus = 0;
                    }
                     this.$set(item,'commentLoading',false)
                })
            }
        }).catch(e => {
            this.$message.error(e.message)
        })
    },
    jumpPDF(fulltext){
        window.open('/minioUrl/videos/' + fulltext)
    },
    getCheckedValues() {
      return this.journalList.filter((_, index) => this.checkedList[index]);
    },
    batchCarts() {
        let checkData =  this.getCheckedValues();
        if (checkData && checkData.length>0) {
            let params = checkData.map(e=>{
                return {
                    "userId": this.user.id,
                    "resourceType":'journal',
                    "resourceId":e.id
                }
            })
            BatchCarts(params).then(res=>{
                if(res.code == -1){
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                this.$router.push("/cart");
            })
        } else {
            this.$message.warning("请选择要加入购物车的内容");
        }
      },
    addCart(item){
            EditCart({
                "userId": this.user.id,
                "resourceType":'journal',
                "resourceId":item.id,
                "price":item.yearPrice,
            }).then(res=>{
                if(res.code == -1){
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                this.$router.push("/cart");
            })
    },
    addOrder(item){
            let params = {
                orderUserId: this.user.id,
                orderResourceList:[{
                    resourceId: item.id,
                    resourceType: 'journal',
                    resourceName: item.journalTitle,
                    unitPrice: item.yearPrice,
                    realPaid: item.yearPrice
                }]
            }
            EditOrder(params).then(res => {
                if (res.code == -1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success(res.msg);
                // window.open(this.$router.resolve("/order/"+res.data.id).href)
            })
    },
    getCheckComments(row){
        this.articleId = row.id;
        row.commentLoading = true;
        GetCheckComments({
              articleId:this.articleId,
              page:this.commentsPage,
              size:this.commentslSize,
        }).then(e => {
            if (e && e.data){
                this.commentsList = e.data.records;
                this.commentsTotal = e.data.total;
                row.commentLoading = false;
                this.$refs['commentCheckDialog'].show();
            }
        }).catch(e => {
            this.$message.error(e.message)
        }) 
    },
    operation(){
        this.submitParam.articleId = this.articleId;
        if (!this.submitParam.comment){
            this.$message.error("回复意见不能为空！");
            return;
        }
        this.saveCommentLoading = true;
        this.submitParam.operation = '回复'
        this.submitParam.userId = this.user.id;
        this.submitParam.userRole = this.user.role;
        CheckArticleStatus(
             this.submitParam
        ).then(e => {
            this.saveCommentLoading = false;
            if (e.code == 0){
                this.$message.success(e.msg)
                this.$refs['commentAnswer'].hide();
                this.getCheckComments(this.articleId);
            }else {
                this.$message.error(e.msg);
            }
        }).catch(e => {
              this.$message.error(e.message)
        }) 
    },
  },
  watch: {
    
  }
}
</script>

<style lang="scss">
.Main{
    .base-input--suffix .base-input__inner {
        padding-left: 12px !important;
    }
    .filter_select{
        margin-right: 20px;
        .base-input__inner{
            color: #3B7AA3;
        }
    }
}
</style>
<style lang="scss" scoped>
.Main{
    height:100%;
    width: 100%;
    overflow: auto;
    .bounce-loading{
        height:70vh;
        align-items: center;
        justify-content: center;
    }
    .base-button--primary {
        background-color: #3F7FA7;
        border-color: #3F7FA7;
    }
    .base-input {
      border: 1px solid #bfc3de;
      background-color: #fff;
      border-radius: 4px;
      padding: 0 12px 0 16px;
      -webkit-transition: border-color .3s;
      transition: border-color .3s;
    }
    .base-input__placeholder{
        left: 12px;
    }
    .base-select{
        border: 1px solid #bfc3de !important;
        background-color: #fff;
    }
    .page_content{
        min-height: calc(100vh - 288px);
        position: relative;
        width: 1200px;
        margin: 20px auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        .card{
            padding: 18px 0px;
            .search_operate{
                display: flex;
                align-items: center;
                .select_field{
                    width: 120px;
                }
                .select_value{
                    width: 700px;
                }
                .base-button--primary{
                    padding: 0px 33px 0 33px;
                }
                .base-button--text{
                    color: #3B7AA3;
                    background: #ecf5ff;
                    padding: 0 12px 0 12px;
                }
           }
           .search_filter{
                display: flex;
                align-items: center;
                .filter_text{
                    color: #999;
                    margin-right: 20px;
               }
               .filter_select{
                    border: 0px solid #bfc3de !important;
                    width:150px;
                    background: #ecf5ff;
                    .base-input__inner{
                        color: #3B7AA3;
                    }
               }
           }
           .search_result{
                .search_result_operate{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .result_total_text{
                            color: #999;
                        }
                }
                .search_result_list{
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    .row{
                       display: flex;
                        flex-wrap: wrap;        /* 超出自动换行 */
                        gap: 16px;  
                         .search_result_item{
                            flex: 0 0 calc((100% - 32px) / 3);   /* 32px = gap * 2 */
                            display: flex;
                            padding: 20px;
                            border: 1px solid #dcdfe6;
                            border-radius: 4px;
                            flex-direction: column;
                            .search_result_item_input{
                                display: flex;
                                justify-content: space-between;
                                align-items:center;
                                cursor: pointer;
                                .search_result_item_collect{
                                    display: flex;
                                    align-items: center;
                                    font-size: 12px;
                                }
                            }
                            .search_result_item_desc{
                                font-size: 14px;
                                .search_result_item_title{
                                    font-size: 16px;
                                    font-weight: bolder;
                                    margin: 10px 0px;
                                }
                                .search_result_item_issn{
                                    color: #999;
                                    margin: 10px 0px;
                                }
                                .search_result_item_description{
                                    color: #999;
                                    margin: 10px 0px;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 3;
                                    -webkit-box-orient: vertical;
                                }
                            }
                            .search_result_item_icon{
                                display: flex;
                                color: #999;
                                div{
                                    display: flex;
                                    align-items: center;
                                    margin-right: 10px;
                                    img{
                                        margin-right: 5px;
                                    }
                                }
                            }
                            .search_result_item_new{
                                margin: 10px 0px;
                                .base-tag{
                                    margin-right: 5px;
                                }
                            }
                            .icon{
                                width: 20px;
                            }
                            .search_result_item_cover{
                                display: flex;
                                justify-content: center;
                                img{
                                    width: 150px;
                                    height: 180px;
                                }
                            }
                            .search_result_item_price{
                                margin-top: 20px;
                                .search_result_item_number{
                                    font-size: 22px;
                                    color: rgb(198 9 9);
                                    font-weight: bolder;
                                }
                                .search_result_item_year{
                                    color: #999;
                                }
                            }
                            .search_result_item_operate{
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 15px;
                                    margin-top: 20px;
                                    .base-button{
                                        padding: 0 40px;
                                        border-radius: 8px;
                                    }
                                    .base-button--text{
                                        border: 1px solid #3B7AA3;
                                        color: #3B7AA3;
                                        background-color: #fff;
                                    }
                            }
                        }
                    }
                   
                }
           }
            .page-warp{
                width: 100%;
                text-align: center;
                margin-top: 40px;
           }
        }
        
    }
}
</style>
